<template>
	<div id="home">
		<header>
	  		<div class="header_1">
	  			<div class="header_1_l">
	  				<a href="tencent://message/?uin=800856669&Site=&Menu=yes" target="_self" class="qq">
	  					<img src="../../static/img/header-01.png"/>
	  					<p>在线客服</p>
	  				</a>
	  				<span></span>
	  				<div @click="collection('赶紧试','https://www.ganjinshi.com/#/home/index')" class="collection">
	  					<img src="../../static/img/header-02.png"/>
	  					<p>收藏</p>
	  				</div>
	  			</div>
	  			<div class="header_1_r">
	  				<ul v-if="!token">
	  					<!--<li><a href="https://www.meilipa.com/">用户登录</a></li>-->
	  					<li><router-link to="/IDoperation/login">商家登录</router-link></li>
	  					<li class="feature"><router-link to="/IDoperation/register">免费注册</router-link></li>
	  				</ul>
	  				<p id="logout" v-else><router-link to="/agent/agentCenter">{{user}}</router-link>
	  				<router-link to="/agent/agentCenter"><span>商家中心</span></router-link>
	  				<span @click="logout" class="logout">退出</span></p>
	  				<span class="color_fg"></span>
	  				<router-link v-wechat-title='$route.meta.title' to="/home">赶紧试首页</router-link>
	  				<span class="color_fg"></span>
	  				<!--<router-link to="/a">用户端</router-link>-->
	  				<!--<span class="color_fg"></span>-->
	  				<router-link to="/share">分享赚钱<span>月入4000</span></router-link>
	  				<span class="color_fg"></span>
	  				<router-link to="/help">帮助中心</router-link>
	  				<!--<span class="color_fg"></span>-->
	  				<!--<router-link to="/a">网站导航<img src="../../static/img/header-03.png" /></router-link>-->
	  			</div>
	  		</div>
	  		<div class="header_2">
	  			<div class="header_2_box">
	  				<img src="../../static/img/logo-01.png"/>
	  				<div class="header_right">
	  					<ul>
	  						<li>
	  							<img src="../../static/img/home-22.png"/>
	  							<p>高中奖率</p>
	  						</li>
	  						<li>
	  							<img src="../../static/img/home-23.png"/>
	  							<p>好货精选</p>
	  						</li>
	  						<!--<li>
	  							<img src="../../static/img/home-24.png"/>
	  							<p>限量秒杀</p>
	  						</li>-->
	  					</ul>
	  					<div class="search">
		  					<img src="../../static/img/header-04.png"/>
		  					<input type="text" placeholder="请输入想找的试用品" v-model="searchVal" />
		  					<input @click="search" type="button" value="搜索" />
		  				</div>
	  				</div>
	  			</div>
	  		</div>
	  		<div class="header_3">
	  			<div class="header_3_box">
	  				<div id="classify">
	  					<img src="../../static/img/header-05.png"/>
	  					<p>试用品分类</p>
	  				</div>
	  				<ul>
	  					<li><router-link to="/home/index" exact>首页</router-link></li>
	  					<li><router-link to="/home/good">精选好货</router-link></li>
	  					<li><router-link to="/home/auction" exact>赶紧拍</router-link></li>
	  					<li><router-link to="/home/exchange" exact>金币兑换</router-link></li>
	  					<!--<li><router-link to="/home/seckill" exact>限量秒杀</router-link></li>-->
	  					<li><router-link to="/home/mustbe" exact>新人必中</router-link></li>
	  					<li><router-link to="/share" exact>邀请有礼</router-link></li>
	  				</ul>
	  			</div>
	  		</div>
	    </header>
	    <div id="rightNav">
	    	<router-link to="/share">
	    		<img src="../../static/img/nav-01.png"/>
	    		<p>邀<br />请<br />有<br />奖</p>
	    	</router-link>
	    	<!--------在线客服---------->
	    	<div id="qq" class="nav_item">
	    		<img src="../../static/img/nav-02.png"/>
	    		<p>在线<br />客服</p>
	    		<div class="service">
	    			<p class="service_title">用户咨询</p>
	    			<div class="service_qq">
    					<p>QQ咨询：800856669</p>
	    				<a href="tencent://message/?uin=800856669&Site=&Menu=yes" target="_self">
	    					<img src="../../static/img/QQ.png"/>
	    				</a>
	    			</div>
	    			<p class="service_title">商家专属通道</p>
	    			<div class="service_qq">
    					<p>QQ咨询：800856669</p>
    					<a href="tencent://message/?uin=800856669&Site=&Menu=yes" target="_self">
	    					<img src="../../static/img/QQ.png"/>
	    				</a>
	    			</div>
	    			<div class="service_qq">
    					<p>财务QQ：&nbsp;16092220</p>
    					<a href="tencent://message/?uin=16092220&Site=&Menu=yes" target="_self">
	    					<img src="../../static/img/QQ.png"/>
	    				</a>
	    			</div>
	    			<!--<div class="hot_line">
	    				热线电话：13425434362
	    			</div>-->
	    			<div class="word_time">
	    				<p>工作时间：周一至周五，9:00-21:00<br />(节假日除外)</p>
	    			</div>
	    		</div>
	    	</div>
	    	<div id="wx" class="nav_item">
	    		<img src="../../static/img/nav-03.png"/>
	    		<div class="wx">
	    			<h3>关注赶紧试微信公众号</h3>
	    			<p>扫描二维码关注，更多精彩活动在等你！</p>
	    			<img src="../../static/img/code.jpg"/>
	    		</div>
	    	</div>
	    	<!--<div id="novice" class="nav_item">
	    		<img src="../../static/img/nav-04.png"/>
	    		<div class="novice">
	    			新手入门
	    		</div>
	    	</div>-->
	    	<!--<div id="feedback" class="nav_item">
	    		<img src="../../static/img/nav-05.png"/>
	    		<div class="feedback">
	    			意见反馈
	    		</div>
	    	</div>-->
	    	<div @click="Top" class="Top">
	    		<img src="../../static/img/nav-06.png"/>
	    	</div>
	    </div>
	  	<router-view/>
	</div>
</template>

<script>
export default{
	name:'home',
	data:function(){
		return{
			searchVal: '',//搜索的值
			token: '',
			user:'',
		}
	},
	methods:{
		Top: function(){
			var _this = this;
	  		var timer = null;
	  		cancelAnimationFrame(timer);
				timer = requestAnimationFrame(function fn(){
					var oTop = document.body.scrollTop || document.documentElement.scrollTop;
					if(oTop > 0){
					document.body.scrollTop = document.documentElement.scrollTop = oTop - 250;
					timer = requestAnimationFrame(fn);
					}else{
					cancelAnimationFrame(timer);
					} 
				});
	  	},
	  	collection: function(title,url){
	  		try{
			   window.external.addFavorite(url,title);
			}
			catch(e){
				try{
				    window.sidebar.addPanel(title,url,"");
				}
				catch(e){
					this.$alert("3","抱歉，您所使用的浏览器无法完成此操作。请使用快捷键Ctrl+D进行添加！");
				}
			}
	  	},
	  	search: function(){
	  		if(this.$route.path == '/home/index'){
	  			this.$router.push({path:'/home/good',query:{taskName:this.searchVal}});
	  		}else{
	  			this.$router.push({path:this.$route.path,query:{taskName:this.searchVal}});
	  		}
	  	},
		logout: function(){
			localStorage.removeItem('token');
			this.token = '';
		},
		info: function(){
			var _this = this;
			_this.$axios.post('/agent/info/show').then(function(res){
			    var data = res.data.result;
		    	_this.user = data.phone;
			}).catch(function (error) {
			    console.log(error);
			});
		},
	},
	created:function(){
		var token = localStorage.getItem('token');
		if(token){
			this.token = token;
			this.info();
		}
	},
}
</script>

<style scoped>
/* ========== */
/* = Header = */
/* ========== */
header{
	
}
header .router-link-active{
	color: #ff464e;
}
.header_1{
	width: 1230px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #808080;
	font-size: 12px;
	padding: 8px 0;
}
.header_1_l{
	display: flex;
	align-items: center;
}
.header_1_l span{
	height: 10px;
	width: 1px;
	background-color: #9f9f9f;
	margin: 0 15px;
}
.qq,.collection{
	display: flex;
	align-items: center;
	cursor: pointer;
}
.qq img,.collection img{
	height: 15px;
	display: block;
	margin-right: 3px;
}
.header_1_r{
	display: flex;
	align-items: center;
}
.header_1_r .color_fg{
	height: 10px;
	width: 1px;
	background-color: #9F9F9F;
	margin: 0 10px;
}
.header_1_r ul{
	display: flex;
	align-items: center;
}
.header_1_r ul li{
	margin-left: 10px;
}

.header_1_r #logout{
	display: flex;
}
.header_1_r .logout{
	color: #FF464E;
	cursor: pointer;
	margin-left: 5px;
}
.header_1_r a{
	display: flex;
	align-items: center;
	margin: 0 5px;
}
.header_1_r a span{
	color: #FF464E;
}
.header_1_r a img{
	height: 8px;
	display: block;
	margin-left: 3px;
}
.feature{
	color: #ff464e;
}
.header_2{
	background-color: #fff;
	padding: 35px 0;
}
.header_2_box{
	width: 1230px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header_2_box>img{
	height: 50px;
	display: block;
}
.header_2_box .header_right{
	display: flex;
	align-items: center;
}
.header_2_box .header_right ul{
	display: flex;
	align-items: center;
	margin-right: 10px;
}
.header_2_box .header_right ul li{
	display: flex;
	align-items: center;
	padding: 0 15px;
	border-right: 1px dashed #e6e6e6;
	color: #9F9F9F;
	font-size: 16px;
}
.header_2_box .header_right ul li:last-child{
	border-right: none;
}
.header_2_box .header_right ul li img{
	height: 30px;
	display: block;
	margin-right: 5px;
}
.search{
	background-color: #F5F5F5;
	height: 36px;
	width: 320px;
	display: flex;
	align-items: center;
	padding-left: 15px;
	box-sizing: border-box;
}
.search img{
	height: 20px;
	display: block;
	margin-right: 15px;
}
.search input[type='text']{
	width: calc(100% - 115px);
	height: 100%;
	border: none;
	background-color: rgba(0,0,0,0);
}
.search input[type='button']{
	height: 36px;
	width: 80px;
	background-color: #FF5A62;
	color: #FFFFFF;
	letter-spacing: 10px;
	padding-left: 10px;
	box-sizing: border-box;
	font-size: 16px;
	border: none;
}
.header_3{
	background-color: #fff;
	border-bottom: 2px solid #ff464e;
}
.header_3_box{
	width: 1230px;
	margin: 0 auto;
	display: flex;
}
.header_3_box #classify{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 150px;
	background-color: #ff464e;
	border-radius: 10px 10px 0 0;
	padding: 10px 0;
	color: #FFFFFF;
}
.header_3_box #classify img{
	height: 12px;
	display: block;
	margin-right: 10px;
}
.header_3_box ul{
	display: flex;
}
.header_3_box ul li{
	padding: 10px 0;
	width: 100px;
	text-align: center;
	color: #4d4d4d;
}
/*--------右边侧导航----------*/
#rightNav{
	width: 40px;
	height: 100%;
	position: fixed;
	right: 0;
	top: 0;
	background-color: #444444;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 11;
}
#rightNav a{
	width: 100%;
}
#rightNav>a img{
	width: 30px;
	display: block;
	margin: 0 auto;
	margin-bottom: 5px;
}
#rightNav a p{
	background: linear-gradient(to bottom,#F2309A,#FF4550);
	color: #FFFFFF;
	text-align: center;
	padding: 5px 0;
}
#rightNav .nav_item{
	width: 40px;
	padding: 15px 0;
	margin: 0 auto;
	border-bottom: 1px solid #222222;
	cursor: pointer;
	position: relative;
}
#rightNav .nav_item>img{
	width: 20px;
	display: block;
	margin: 0 auto;
}
#rightNav .nav_item>p{
	color: #CCCCCC;
	margin-top: 3px;
	text-align: center;
}
.Top{
	position: fixed;
	bottom: 40px;
	width: 30px;
	right: 5px;
	border-top: 1px solid #222222;
	padding: 15px 0;
	cursor: pointer;
}
.Top img{
	width: 18px;
	display: block;
	margin: 0 auto;
}

/*------在线客服---------*/
#qq:hover .service{
	display: block;
}
.service{
	position: absolute;
	right: 40px;
	top: -30px;
	width: 270px;
	background-color: #FFFFFF;
	display: none;
	border: 1px solid #B3B3B3;
	box-sizing: border-box;
	z-index: 15;
}
.service p.service_title{
	background-color: #E6E6E6;
	color: #545454;
	display: flex;
	align-items: center;
	padding-left: 10px;
	box-sizing: border-box;
	height: 36px;
}
.service_qq{
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
	color: #545454;
	display: flex;
	align-items: center;
}
.service_qq p{
	white-space: nowrap;
}
.service_qq a img{
	width: 80px;
	display: block;
	margin-left: 10px;
}
.hot_line{
	color: #545454;
	padding: 15px;
	padding-top: 0;
	box-sizing: border-box;
}
.word_time{
	width: 240px;
	margin: 0 auto;
	padding: 15px 0;
	border-top: 1px dashed #B3B3B3;
	box-sizing: border-box;
}
/*---------微信二维码-----------*/
#wx:hover .wx{
	display: block;
}
.wx{
	border: 1px solid #E6E6E6;
	background-color: #fff;
	padding: 15px;
	box-sizing: border-box;
	position: absolute;
	right: 40px;
	top: -40px;
	display: none;
}
.wx h3{
	color: #FF464E;
	text-align: center;
	white-space: nowrap;
	margin-bottom: 10px;
}
.wx p{
	font-size: 14px;
	color: #545454;
}
.wx img{
	width: 180px;
	display: block;
}
/*----------新手入门----------------*/
#novice:hover .novice{
	display: block;
}
#feedback:hover .feedback{
	display: block;
}
.novice,.feedback{
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
	border: 1px solid #E6E6E6;
	box-sizing: border-box;
	background-color: #fff;
	position: absolute;
	right: 40px;
	display: none;
	white-space: nowrap;
	top: 3px;
}
</style>
